今天實作的是可選面數+骰數的元件，概念其實就是昨天的延伸，只是套版方式不太一樣，另外就是骰子random值的邏輯想滿久...

總之先上程式碼：

HTML

<button class="btn btn-outline-primary mr-2" 
    data-toggle="modal" data-target="#mutiDiceModal" 
    (click)="D3()">D3</button>
<button class="btn btn-outline-primary mr-2" 
    data-toggle="modal" data-target="#mutiDiceModal" 
    (click)="D6()">D6</button>
<button class="btn btn-outline-primary mr-2" 
    data-toggle="modal" data-target="#mutiDiceModal" 
    (click)="D10()">D10</button>
<button class="btn btn-outline-primary" 
    data-toggle="modal" data-target="#mutiDiceModal" 
    (click)="D100()">D100</button>

<!-- Modal -->
<div class="modal fade" id="mutiDiceModal" tabindex="-1" role="dialog" 
aria-labelledby="mutiDiceModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" 
                        data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body mt-4">
                        <p class="text-center mb-4 h2">
                            {{diceType}}面骰
                        </p>
                <p class="text-center h5">請選擇骰數</p>
                <div class="row">
                    <div class="col d-flex 
                        justify-content-center align-items-center">
                        <input type="number" class="mr-2"
                            [(ngModel)]="diceNumber" min="1">
                        <button type="button" class="btn btn-primary" 
                        (click)="randomDice()">Rolling!</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col d-flex 
                        justify-content-center align-items-center">
                        <p id="dice" class="dice">
                            {{diceData}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'mutildice',
    templateUrl: 'mutildice.component.html',
    styleUrls: ['mutildice.component.scss']
})

export class MutildiceComponent {
    diceType = 0;
    D3() {
        this.diceType = 3;
        this.diceData = '';
    }
    D6() {
        this.diceType = 6;
        this.diceData = '';
    }
    D10() {
        this.diceType = 10;
        this.diceData = '';
    }
    D100() {
        this.diceType = 100;
        this.diceData = '';
    }

    diceNumber = 1;
    diceData;
    randomDice() {
        let ramdomnum = Math.floor((Math.random() * (this.diceType * this.diceNumber - this.diceNumber+1))) + this.diceNumber;
        this.diceData = ramdomnum;
        console.log('diceData', this.diceData);
    }
}

完成結果：
https://i.imgur.com/UR7p5v6.gif

randomDice 部分的邏輯真的是卡最久的......一直想最大值和最小值想半天，感覺數學都還老師了XD

目前網頁可以跑但code都還沒有整理過，明天準備來完善整體骰子功能，並稍微做點小小美化囉。

= = = = =

你今天的努力，
是否有跟未來的夢想
同一個等級？